@extends('layouts.app')
@section('content')

    <div class="guanlibox">
        <ul class="libneg">
            <li>基本信息</li>
            <li>相关照片</li>
            <li>资料文档</li>
            <li>历代桥志</li>
            <li>遗产名录</li>
            <li>古桥景点</li>
            <li>桥梁形式</li>
            <li>技艺特点</li>
            <li>古桥文化</li>
            <li>相关新闻</li>
            <a href="quanjingtu.html"><li>全景图片</li></a>
            <a href="moxing.html"><li>三维模型</li></a>
            <!-- <li>古桥保护</li> -->

        </ul>



        <div class="guliner" style="display: block;">

            <div>
                <img src="/home/images/04.jpg">
                名称:{{ $bridge->bridge_name }}<br>

                历史:赵州桥又称安济桥，坐落在河北省赵县的洨河上，横跨在37米多宽的河面上，因桥体全部用石料建成，当地称做“大石桥”。建于隋朝年间公元595年－605年，由著名匠师李春设计建造，距今已有1400多年的历史，是当今世界上现存第二早（还有一座小商桥）、保存最完整的古代单孔敞肩石拱桥。赵州桥是古代劳动人民智慧的结晶，开创了中国桥梁建造的崭新局面。<br>

                年代:{{ $bridge->age->name }}<br>

                类别:{{ $bridge->type->name }}<br>

                人文:石桥是专业普遍的建筑<br>
            </div>
        </div>

        <div class="guliner">
            <div class="xgimgbox">
                <img src="/home/images/03.png">
                <img src="/home/images/04.jpg">
                <img src="/home/images/05.jpg">
                <img src="/home/images/06.jpg">
            </div>
        </div>

        <div class="guliner duomeiti">
            <div class="meitibt">
                <span>资料文档</span>
                <p class="add">添加</p>

                <p>删除</p>
            </div>
            <ul>

                <li>
                    <img src="/home/images/shiping.png" class="shipingzz">
                    <p>桥梁</p>
                </li>
                <li>
                    <img src="/home/images/shiping.png" class="shipingzz">
                    <p>桥梁</p>
                </li>
                <li>
                    <img src="/home/images/wendang.jpg" class="wengdangzz">
                    <p>桥梁</p>
                </li>
            </ul>
        </div>


        <div class="guliner">
            {!! $bridge->detail->journal !!}
        </div>


        <div class="guliner">
            {!! $bridge->detail->heritage_list !!}
        </div>


        <div class="guliner duomeitis">
            {!! $bridge->detail->attractions !!}
        </div>


        <div class="guliner">
            {!! $bridge->detail->bridge_type !!}
        </div>


        <div class="guliner">
            {!! $bridge->detail->feature !!}
        </div>


        <div class="guliner">
            <h3>桥名</h3>

            桥名由来—瑞祥吉兆

            太平桥  安宁桥   利济桥永嘉桥  福禄桥  乐善桥  万寿桥  长庆桥  灵台桥   兴文桥
            <h3>桥联</h3>


            古小江桥

            小江桥，桥洞圆，圆似镜，镜照山会两县

            大善塔，塔顶尖，尖如笔，笔写五湖四海

            霞川桥

            高山闻石气，曲水渡晴霞

            <h3>桥饰</h3>

            出嫁过三桥 ：结婚为人生大事，旧时，更是女子一生的归宿所系。绍兴城内有三座桥-----福禄桥、万安桥、如意桥。其名称正合婚嫁喜事之所需，所以新娘上桥后，花桥一定要经过这三座桥。甚至有些乡下姑娘出嫁也上城到这三桥去转一圈，以图吉利，以示瑞祥。俗称过桥、杀鹅、再拜堂成婚。

        </div>


        <div class="guliner shouc  xianggunnews">
            <ul>
                <li>
                    <img src="/home/images/1.jpg" >
                    <p>桥梁崛起</p>

                </li>
                <li>
                    <img src="/home/images/1.jpg" >
                    <p>古桥维护发展至今</p>

                </li>
                <li>
                    <img src="/home/images/1.jpg">
                    <p>历代桥梁</p>

                </li>

            </ul>

        </div>


    </div>





    <!--查看视频-->
    <div class="shiping">
        <p>视频播放 <span>x</span></p>
        <video width="100%" height="240" controls autoplay>

            <source src="movie.mp4" type="video/mp4">

        </video>

    </div>
    <!--查看视频结束-->


    <!--查看文档-->
    <div class="wengdangyl">

        <div class="wenback">
        </div>
        <div class="yulanwendang">

            <p>阅览文档 <span>x</span></p>
            <div class="chfnag">
                文档内容
            </div>

        </div>
    </div>
    <!--查看视频结束-->



    <!--添加文件-->
    <div class="addwj">
        <from>
            <p>添加<span>x</span></p>
            <input type="file" name="">
            <input type="" name="" placeholder="文件标签">
            <input type="submit" name="">
        </from>
    </div>

    <!--添加文件结束-->
@stop

@section('script')
    <script>
        //关闭视频
        $(".shiping p span").click(function(){
            $(".shiping").hide();
        })

        //关闭文档
        $(".yulanwendang p span").click(function(){
            $(".wengdangyl").hide();
        })

        //选中左侧菜单
        $(".guanlibox .libneg li").each(function(i){
            $(".guanlibox .libneg li").eq(i).click(function(){
                $(this).css("background-color","#ffffff").siblings("li").css("background-color","rgba(228, 228, 228, 1)");
                $(".guanlibox .guliner").eq(i).show().siblings(".guliner").hide();
            })
        })

        //查看-视频

        $(".duomeiti ul li .shipingzz").click(function(){

            $(".shiping").show();
        })

        //查看-文档
        $(".duomeiti ul li .wengdangzz").click(function(){

            $(".wengdangyl").show();
        })



        $(".menutop .menutoptext .lefts img").click(function(){
            $(".muenus").show();
        })


        //关闭添加文件
        $(".addwj p span").click(function(){
            $(".addwj").hide();
        })

        //添加文件
        $(".add").click(function(){
            $(".addwj").show();
        })
    </script>
@stop

